import React, { useState, useRef } from 'react'
import styles from './index.module.scss'
import { Link } from 'react-router-dom'
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Space,
  Input,
  Radio,
  Upload,
  message,
} from 'antd'
import Channel from 'components/Channel'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { baseURL } from 'utils/request'
import { addArticles } from 'api/article'

export default function ArticlePublish() {
  const [type, setType] = useState(0)
  const [fileList, setFileList] = useState([])
  const formRef = useRef(null)
  return (
    <div className={styles.article}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to='/layout/home'>首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>发布文章</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form
          ref={formRef}
          labelCol={{ span: 4 }}
          size='large'
          onFinish={onFinish}
          initialValues={{
            // channel_id: 0
            content: '',
            type: type,
          }}
        >
          <Form.Item
            label='标题'
            name='title'
            rules={[{ required: true, message: '文章标题不能为空' }]}
          >
            <Input style={{ width: 400 }} placeholder='请输入文章标题'></Input>
          </Form.Item>

          <Form.Item
            label='频道'
            name='channel_id'
            rules={[{ required: true, message: '频道不能为空' }]}
          >
            <Channel></Channel>
          </Form.Item>

          <Form.Item label='封面' name='type'>
            <Radio.Group onChange={changeType}>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 上传组件 */}
          <Form.Item wrapperCol={{ offset: 4 }}>
            {type !== 0 && (
              //fileList是用来控制文件列表
              //action是控制上传的url
              <Upload
                listType='picture-card'
                fileList={fileList}
                action={`${baseURL}upload`}
                name='image'
                onChange={upLoadImage}
              >
                {fileList.length < type && ' 上传'}
              </Upload>
            )}
          </Form.Item>

          <Form.Item
            label='内容'
            name='content'
            rules={[{ required: true, message: '文章内容不能为空' }]}
          >
            <ReactQuill theme='snow' placeholder='请输入文章内容'></ReactQuill>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type='primary' htmlType='submit' size='large'>
                发布文章
              </Button>
              <Button size='large' onClick={addDraft}>
                存入草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
  async function save(value, draft) {
    if (fileList.length !== type) {
      return message.warning('上传的图片数量不正确')
    }
    const images = fileList.map((item) => {
      return item.url || item.response.data.url
    })
    // console.log(value)
    // console.log(images)
    await addArticles(
      {
        ...value,
        cover: {
          type,
          images,
        },
      },
      draft
    )
    message.success('添加成功')
  }
  async function onFinish(value) {
    save(value, false)
  }

  async function addDraft() {
    const value = await formRef.current.validateFields()
    // console.log(value)
    save(value, true)
  }

  function changeType(e) {
    setType(e.target.value)
    setFileList([])
  }
  function upLoadImage({ fileList }) {
    setFileList(fileList)
  }
}
